import React from 'react';
import { Link } from 'react-router-dom'
import AppBar from '../components/AppBar';
import { allOrders, cancel, commentOrder, pay } from '../api/customer'
import { CommodityList } from '../components/OrderItem'

export const OrderCard = (props) => {
    let badge = '';
    let operation = (
        <button
            type="button"
            className="btn btn-danger"
            style={{ minWidth: '200px' }}
            onClick={() => { cancel(props.order.id) }}
        >
            取消订单
        </button>
    );
    let order = props.order;

    if (order.cancelTime != 0) {
        badge = <span className="badge badge-secondary">已取消</span>
        operation = (
            <button
                type="button"
                className="btn btn-light"
                style={{ minWidth: '200px' }}
            >
                无可用操作
        </button>
        );
    } else if (order.payTime == 0) {
        badge = <span className="badge badge-primary">待支付</span>
        operation = (<>
            <button
                type="button"
                className="btn btn-danger"
                style={{ minWidth: '200px' }}
                onClick={() => { cancel(props.order.id) }}
            >
                取消订单
        </button>
            <button
                type="button"
                className="btn btn-primary"
                style={{ minWidth: '200px' }}
                onClick={() => { pay(props.order.id) }}
            >
                去支付
        </button>
        </>);
    } else if (order.acceptTime == 0) {
        badge = <span className="badge badge-info">待商家接单</span>
    } else if (order.delivererTakeTime == 0) {
        badge = <span className="badge badge-warning">商家已接单</span>
    } else if (order.delivererArriveTime == 0) {
        badge = <span className="badge badge-warning">骑手已接单</span>
    } else if (order.deliverTime == 0) {
        badge = <span className="badge badge-warning">骑手到达商家</span>
    } else if (order.receiveTime == 0) {
        badge = <span className="badge badge-danger">骑手正在送货</span>
        operation = (
            <button
                type="button"
                className="btn btn-secondary"
                style={{ minWidth: '200px' }}
            >
                正在送货，不可取消订单
            </button>
        )
    } else {
        badge = <span className="badge badge-success">订单已完成</span>
        operation = (
            <button
                type="button"
                className="btn btn-success"
                style={{ minWidth: '200px' }}
                onClick={() => {
                    window.location.href = '/customer/order/comment/' + props.order.id
                }}
            >
                评价订单
            </button>
        )
    }

    return (
        <>
            <CommodityList
                cart={JSON.parse(order.commodity)}
                shop={{
                    name: order.shopName,
                    shipPrice: order.shipPrice
                }}
                badge={badge}
            />
            <div style={{ textAlign: 'right', margin: '15px 0' }}>
                {operation}
            </div>
        </>
    )
}

const OrderList = (props) => {
    let orders = props.orders.map(order => {
        return (
            <li className="list-group-item" key={props.orders.indexOf(order)}>
                <Link to={"/customer/order/" + order.id} style={{ textDecoration: 'none', color: 'black' }}><OrderCard order={order} /></Link>
            </li>
        )
    })
    return (
        <ul className="list-group">
            {orders}
        </ul>
    )
}

export class OrderListPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            orders: []
        }
    }

    componentDidMount() {
        allOrders((data) => {
            this.setState({
                orders: data
            })
        })
    }

    render() {
        return (
            <>
                <AppBar />
                <div className="container" style={{ paddingTop: '20px' }}>
                    <OrderList orders={this.state.orders} />
                </div>
            </>
        )
    }
}